<template>
  <el-container>
    <el-menu
      :default-active="activeIndex"
      :ellipsis="false"
      mode="horizontal"
      text-color="#606266"
      active-text-color="#67C23A"
      class="menu"
    >
      <el-menu-item index="1" style="font-size: 26px; color: #67c23a">
        <router-link to="/">Real World</router-link>
      </el-menu-item>
      <div class="flex-grow" />
      <!-- 如果用户已登录 -->
      <template v-if="userStore.isLoggedIn">
        <el-menu-item index="2">
          <h3>{{ userStore.username }}</h3>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-edit"></i>
          <router-link to="/article/create">新建文章</router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/settings">设置</router-link>
        </el-menu-item>
        <el-menu-item index="5" @click="logout"> 退出 </el-menu-item>
        <el-dropdown trigger="hover" class="avatar-container">
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="showProfile">
                <router-link to="/profile">{{
                  userStore.getUserName
                }}</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <!-- 如果用户未登录 -->
      <template v-else>
        <el-menu-item index="2">
          <router-link to="/login">登录</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/register">注册</router-link>
        </el-menu-item>
      </template>
    </el-menu>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { useUserStore } from "../stores/user"; // 817

const userStore = useUserStore(); // 817

// 创建一个名为 activeIndex 的响应式引用，初始值为 '3'
const activeIndex = ref("3");

// 检查用户是否已登录
const isLoggedIn = ref(false);
const username = ref("");

// 获取路由实例
const router = useRouter();

// 当组件加载时，检查登录状态
onMounted(() => {
  checkLoginStatus();
});

// 检查登录状态
function checkLoginStatus() {
  const id = localStorage.getItem("user-id");
  const token = localStorage.getItem("user-token");

  if (id && token) {
    isLoggedIn.value = true;
    username.value = localStorage.getItem("user-name");
  } else {
    isLoggedIn.value = false;
  }
}

// 登出操作
function logout() {
  localStorage.removeItem("user-id");
  localStorage.removeItem("user-token");
  localStorage.removeItem("user-name");
  isLoggedIn.value = false;

  userStore.isLoggedIn = false;
  userStore.username = "";
  userStore.userId = "";
  userStore.token = "";

  router.push("/");
}

// 显示个人资料页面
function showProfile() {
  router.push("/profile");
}
</script>

<style scoped>
/* scoped限制css样式仅限于本组件,以免造成冲突 */
.flex-grow {
  flex-grow: 1; /*  让元素占据剩余空间 */
}
.menu {
  width: 100%; /* 使菜单占据整个屏幕宽度 */
}
.el-menu-item a {
  color: #fff; /* 设置 a 标签的文字颜色为白色 */
  text-decoration: none; /* 移除 a 标签的下划线 */
}
.avatar-container {
  margin-left: 10px; /* 为头像添加左侧间距 */
}
</style>